<template>
  <!-- 通知待办 -->
  <div class="noticeWait">
    <el-row :gutter="20"
            style="margin-top:20px">
      <el-form label-width="80px">
        <el-col :span="6">
          <el-form-item label="来源">
            <el-select v-model="requestparam.resource1"
                       placeholder="请选择来源">
              <el-option v-for="option in sourceData"
                         :key="option.busi_cate_id"
                         :value="option.busi_cate_id"
                         :label="option.busi_cate_name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="消息时间">
            <el-date-picker v-model="timeVal"
                            type="daterange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="space-between">
          <el-button type="primary"
                     @click="addList">新增</el-button>
          <div> 
              <el-button type="primary"
                         @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
        </div>
      </el-col>
      </el-form>
    </el-row>
    <el-table :highlight-current-row="true"
              class="tableNav"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="noticeList.list">
      <el-table-column type="index"
                       label="序号"
                       sortable
                       align="center"
                       width="80"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="resource"
                       label="来源"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="内容"
                       prop="content"
                       align="center">
      </el-table-column>
      <el-table-column label="消息时间"
                       prop="msgTime"
                       align="center">
      </el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="editNotice(scope.row)">编辑</el-button>
          <el-button type="text"
                     @click="deteleNotice(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="requestparam.pageNum"
                   :page-size="requestparam.pageSize"
                   :page-sizes="[10, 20, 30, 40]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="noticeList.total_count">
    </el-pagination>
    <!-- 新增 -->
    <el-dialog title="新增"
               class="addDialog"
               :visible.sync="dialogFormVisible">
      <el-form :model="addform"
               :rules="rules"
               ref="ruleForm"
               label-width="100px">
        <el-form-item label="来源"
                      prop="origin_id"
                      class="selectWidth">
          <el-select v-model="addform.origin_id"
                     placeholder="请选择业务">
            <el-option v-for="option in sourceData"
                       :key="option.busi_cate_id"
                       :value="option.busi_cate_id"
                       :label="option.busi_cate_name"></el-option>
          </el-select>
          <el-select v-model="nameVal"
                     placeholder="请选择应用">
            <el-option v-for="option in riskType"
                       :key="option.id"
                       :value="option.name"
                       :label="option.name"></el-option>
          </el-select>
          <el-select v-model="nameVal"
                     placeholder="请选择页面">
            <el-option v-for="option in riskType"
                       :key="option.id"
                       :value="option.name"
                       :label="option.name"></el-option>
          </el-select>
          <el-button type="primary"
                     @click="addBusiness">新增业务</el-button>
        </el-form-item>
        <el-form-item label="内容"
                      prop="content">
          <el-input v-model="addform.content"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消息时间"
                      prop="notify_date">
          <el-date-picker v-model="addform.notify_date"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime"
                          placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary"
                   @click="saveNotice">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增业务 -->
    <el-dialog title="新增业务"
               :visible.sync="dialogbusinessVisible">
      <el-form :model="businessform"
               label-width="100px">
        <el-form-item>
          <el-button type="primary"
                     @click="addLine">增行</el-button>
        </el-form-item>
        <el-form-item label="业务名称"
                      class="inputWidth"
                      v-for="(item,index) in businessform.businessList"
                      :key="index">
          <el-input v-model="item.busi_cate_name"
                    placeholder="请输入业务名称"
                    autocomplete="off"></el-input>
          <el-button @click="deleteItem(item, index)"
                     type="danger">删除</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="resetAdd">取 消</el-button>
        <el-button type="primary"
                   @click="saveAdd">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { standardCodeApi } from "@/services/StandardCode";
import { MessageCenterApi } from '@/services/ProjectCenter';
export default {
  data () {
    return {
      nameVal: '',
      timeVal: '',
      types: '',
      sourceData: [], //来源
      businessform: {
        businessList: [],
      },
      rules: {
        origin_id: [{ required: true, message: '请选择业务', trigger: ['blur', 'change'] }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        notify_date: [{ required: true, message: '请选择消息时间', trigger: 'blur' }],
      },
      addform: {
        notify_id: '',
        origin_id: '',
        notify_date: '',
        content: '',
        project_id: ''
      },
      dialogFormVisible: false,
      riskType: [], //风险类型
      requestparam: {
        resource1: '',
        resource: '',
        msgTimeStart: '',
        msgTimeEnd: '',
        company_id: '',
        project_id: '',
        is_page: 1,
        pageNum: 1,
        pageSize: 10,
        msgType:0,
      },
      resetParam: {
        resource1: '',
        resource: '',
        msgTimeStart: '',
        msgTimeEnd: '',
        company_id: '',
        project_id: '',
        is_page: 1,
        pageNum: 1,
        pageSize: 10,
        msgType:0,
      },
      noticeList: {
        list: [],
        total: 0,
        total_count: 0,
      },
      dialogbusinessVisible: false,
    }
  },
  created () {
    this.getBusiness()

    // this.requestparam.project_id = this.$store.state.choosedProject.project_id

    let store = this.$store.state.choosedProject
    let local = window.localStorage.getItem('choosedProject') || '{}'
    this.choosedProject = store.project_id ? store : JSON.parse(local)
    console.log(this.choosedProject);
    this.requestparam.project_id = this.choosedProject.project_id
  },
  mounted () {
    this.search()
  },
  methods: {
    //业务下拉列表
    getBusiness () {
      MessageCenterApi.businessSelectList({
        params: {
          p_id: '',
          is_page: 0
        }
      }).then((res) => {
        if (res.code == 0) {
          this.sourceData = res.data.list
          console.log(this.sourceData);
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    search () {
      if (this.timeVal) {
        this.requestparam.msgTimeStart = this.timeVal[0]
        this.requestparam.msgTimeEnd = this.timeVal[1]
      }
      if(this.requestparam.resource1===1){
        this.requestparam.resource="业务1"
      }else if(this.requestparam.resource1===2){
        this.requestparam.resource="公共中心"
      }else if(this.requestparam.resource1===3){
        this.requestparam.resource="智慧工地"
      }else if(this.requestparam.resource1===4){
        this.requestparam.resource="123"
      }
      console.log(this.requestparam.project_id);
      MessageCenterApi.getForewarnList({
        params: this.requestparam
      }).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.noticeList = res.data;
          this.noticeList.list.forEach((item)=>{
            let moment = require('moment');
            let t1=moment(item.msgTime).format('YYYY-MM-DD HH:mm:ss');
            item.msgTime=t1
          })
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestparam = Object.assign(this.requestparam, reset)
      this.timeVal = ''
      this.search()
    },
    handleSizeChange (val) {
      this.requestparam.page_size = val
      this.search()
    },
    handleCurrentChange (val) {
      this.requestparam.page = val
      this.search()
    },
    //详情
    detailWarn (val) {
      MessageCenterApi.detailNoticeList({
        params: {
          notify_id: val
        }
      }).then((res) => {
        if (res.code == 0) {
          this.addform = res.data
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    //新增
    addList () {
      this.types = 'add'
      this.dialogFormVisible = true
      this.addform.notify_id = ''
    },
    //编辑
    editNotice (row) {
      this.types = 'edit'
      this.dialogFormVisible = true
      this.addform.notify_id = row.notify_id
      this.detailWarn(row.notify_id)
    },
    //保存新增
    saveNotice () {
      this.addform.project_id = this.requestparam.project_id
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          MessageCenterApi.saveNoticeList({
            data: this.addform
          }).then((res) => {
            if (res.code == 0) {
              if (this.types === 'edit') {
                this.$message.success('编辑成功')
              } else {
                this.$message.success('新增成功')
              }
              this.search()
              this.$refs.ruleForm.resetFields();
              this.dialogFormVisible = false
            }
          }).catch((error) => {
            console.log(error)
          });
        }
      })
    },
    resetForm (formName) {
      if (this.types === 'add') {
        this.$refs[formName].resetFields();
      }
      this.dialogFormVisible = false
    },
    deteleNotice (row) {
      MessageCenterApi.deteleNoticeList({
        params: {
          notify_id: row.notify_id,
        }
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success('删除成功')
          this.search()
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    //新增业务
    addBusiness () {
      this.dialogbusinessVisible = true
    },
    //增行
    addLine () {
      let line = {
        p_id: '',
        project_id: this.requestparam.project_id,
        busi_cate_name: ''
      }
      this.businessform.businessList.push(line)
    },
    //保存新增业务
    saveAdd () {
      MessageCenterApi.addBusinessList({
        data: {
          busi_cate_data: this.businessform.businessList
        }
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success('新增成功')
          this.getBusiness()
          this.businessform.businessList = []
          this.dialogbusinessVisible = false
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    //取消新增业务
    resetAdd () {
      this.businessform.businessList = []
      this.dialogbusinessVisible = false
    },
    deleteItem (item, index) {
      this.businessform.businessList.splice(index, 1)
    }
  },
  computed: {},
  watch: {
    '$store.state.choosedProject.project_id': function (val) {
      this.requestparam.project_id = val;
    },
  }
}
</script>

<style lang="scss" scoped>
.noticeWait {
  padding: 20px;
  .el-date-editor {
    width: 100%;
  }
  .el-input {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-table {
    margin-top: 20px;
  }
  .addDialog {
    .selectWidth {
      .el-select {
        width: 26%;
      }
      .el-button {
        margin-left: 10px;
      }
    }
    .el-input,
    .el-date-editor,
    .el-select {
      width: 79%;
    }
  }
  .inputWidth {
    .el-input {
      width: 80%;
    }
  }
}
</style>
